<!--
 * @Author: lxw
 * @Date: 2021-02-09 10:52:41
 * @Description: 妹纸列表组件
 -->
<template>
  <div class="mt-10">
    <v-card v-for="item in list" :key="item._id" class="mb-5">
      <v-card-title>
        <v-chip
          label
          small
          class="mr-2"
          color="primary"
        >
          妹纸
        </v-chip>
        <router-link class="cur-p" tag="span" :to="'/details/girl/' + item._id">妹纸图{{ item.title }}</router-link>
      </v-card-title>
      <v-row class="pl-5 pr-5 pb-4" justify="space-between" no-gutters>
        <span>{{ item.author }}</span>
        <span class="grey--text">{{ item.dateFromNow }}</span>
      </v-row>
      <v-img :src="item.url" height="300" />
      <v-card-text>{{ item.desc }}</v-card-text>
    </v-card>

    <LoadMore :status="loadMoreStatus" @click="handleLoadMore" />
  </div>
</template>

<script>

import LoadMore from '@/components/LoadMore'
export default {
  name: 'GirlList',
  components: { LoadMore },
  data () {
    return {
      page: 1,
      list: [],
      loadMoreStatus: 'before'
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      this.loadMoreStatus = 'loading'
      const { data, page_count } = await this.$apis.queryListData({
        category: 'Girl',
        type: 'Girl',
        count: 20,
        page: this.page
      })
      const _data = data.map(item => {
        item.dateFromNow = this.$dayjs(item.createdAt).fromNow()
        return item
      })
      this.list = [...this.list, ..._data]
      this.loadMoreStatus = page_count === this.page ? 'noMore' : 'before'
    },
    handleLoadMore () {
      this.page++
      this.getData()
    }
  }
}
</script>

<style scoped>

</style>
